<template>
    <div>
        <h2>{{msg}}</h2>
        <h2>{{ msg.split("").reverse().join("") }}</h2>
        <h2>{{ reMsgF() }}</h2>
        <h2>{{ reMsg }}</h2>
        <input v-model="msg">
    </div>
</template>


<script>
import { ref ,computed,watch} from 'vue'
export default{
        setup()
        {
            const msg=ref('Hello Vue');
            console.log(msg)
            //方法
            function reMsgF(){
                console.log('触发reMsgF');
                return msg.value.split("").reverse().join("");
            }
            const reMsg=computed(()=>{
                console.log('触发reMsg');
                return msg.value.split("").reverse().join("");
            })
            //监听器
            watch(msg,(newValue,oldValue)=>{
                console.log('旧值是:'+oldValue+",新值是："+newValue)
            })
            return{
                msg,
                reMsgF,
                reMsg
            }
        }
    }
</script>
    

<style>
</style>